<template>
  <div class="content-container">
  	<m-Head></m-Head>
    <div class="page-option auto-center" v-if="pagedata">
      <div class="data-title">
        <span class="data-title-text">{{pagedata.name}}生产总值</span>
      </div>
      <div class="data-title-content">
        <div class="data-option">
          <h2>{{pagedata.option}}</h2>
          <span class="data-int">亿元</span>
        </div>
        <div class="data-icon">
          <div class="data-icon-wrapper">
            <img :src="pageicon">
          </div>
        </div>
      </div>
    </div>
    <div class="page-chart-wrapper" v-if="pagedata">
      <chart :option="chartoption" :id="'encochart'"></chart>
    </div>
    <div class="page-description auto-center" v-if="desc">
      <p class="page-description-content">{{desc}}</p>
    </div>
  </div>
</template>

<script>
import pageicon from '@/assets/imgicon/econicon.png'
import mHead from '@/components/head'
import axios from '@/assets/api/axios'
import chart from '@/components/chart'
import ChartoOption from '@/assets/api/chart'
export default {
  name: 'economicinfo',
  data: function () {
  	return {
  		//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
  		vuegConfig:{
  			disable:false
  		},
      pagedata: null,
      desc: null,
      pageicon: pageicon,
      chartoption: null
  	}
  },
  created: function () {
    this.getEncData();
  },
  methods: {
    getEncData () {
      var setting = {
        method: 'POST',
        url: '/Earthdata/getData'
      },
      data = {
        city: '定兴县',
        handel: 'econ'
      };
      axios((res) => {
        if (res.stutas === 200) {
          let data = res.data[0];
          this.pagedata = this.setPeoData(data);
          this.desc = data.Economics || this.setDesData(data);
          this.setOption();
        }
      }, {setting, data});
    },
    setDesData (data) {
      let title = `据《中国经济年鉴2014》${data.eqtname}在2014年的生产总值达`;
      let gdp = data.GDP ? `${data.GDP}亿元，` : '';
      let fst = data.FST_INDUSTRY ? `第一产业生产总值为${data.FST_INDUSTRY}亿元，` : '';
      let snd = data.SND_INDUSTRY ? `第二产业生产总值为${data.SND_INDUSTRY}亿元，` : '';
      let trd = data.TRD_INDUSTRY ? `第三产业生产总值为${data.TRD_INDUSTRY}亿元。` : '';
      return [title, gdp, fst, snd, trd].join('');
    },
    setPeoData (data) {
      return {
            option: data.GDP,
            name: data.eqtname,
            chart: {
              list: [data.FST_INDUSTRY, data.SND_INDUSTRY, data.TRD_INDUSTRY]
            }
          };
    },
    setOption () {
      let data = this.pagedata.chart.list;
      let Chart = new ChartoOption('PencilBar', data, 'encochart');
      this.chartoption = Chart.getsoption();
    }
  },
  components: {
    mHead, chart
  }
}
</script>

<style>
</style>